</!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美林时钟表</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"
    ></script>
</head>
<body>
    <div id="main" style="width:400px;height:400px"></div>
    
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            series: [
                {
                    name:'星座',
                    type:'pie',
                    selectedMode: 'single',
                    radius: ['75%', '96%'],

                    label: {
                        normal: {
                            position: 'inside',
                            fontSize: 20,
                            color:'',
                            fontFamily:'Microsoft Yahei'
                        }
                    },
                    data:[
                        {value:1, name:'双子座'},
                        {value:1, name:'白羊座'},
                        {value:1, name:'金牛座'},
                        {value:1, name:'天蝎座'},
                    ]
                },
                {
                    name:'姓名',
                    type:'pie',
                    radius: ['30%', '70%'],
                    label: {
                        normal: {
                            position:'inside',
                            align:'right',
                            fontSize: 18,
                            fontFamily:'Microsoft YaHei',
                            color:"#FFEFE0"
                        }
                    },
                    data:[
                        {value:1, name:'X1'},
                        {value:1, name:'X2'},
                        {value:1, name:'X3'},
                        {value:1, name:'X4'},
                    ]
                },
                {
                    name:'部门',
                    type:'pie',
                    radius: ['0%', '25%'],
                    label: {
                        normal: {
                            position:'inside',
                            align:'right',
                            rotate:'tangential',//字体旋转
                            fontSize: 12,
                            fontFamily:'Microsoft YaHei',
                            color:'#ffffff'
                        }
                    },
                    //设置边
                    itemStyle:{
                      borderWidth: 3,
                      borderColor: '#ffffff'
                    },
                    data:[
                        {value:22, name:'过热期', textStyle:{},itemStyle:{color:"#ee6666"}},
                        {value:22, name:'滞涨期',itemStyle:{color:"#73c0de"}},
                        {value:22, name:'衰退期',itemStyle:{color:"#91cc75"}},
                        {value:22, name:'复苏期',itemStyle:{color:"#fc8452"}},
                       
                        
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>